<template>
  <div class="template">
    <div class="search">
      <router-link :to="{ name: 'add-auth' }">
        <Button type="primary" icon="ios-add">添加菜单</Button>
      </router-link>
    </div>
    <div class="table">
      <Table border :columns="diyData.columns" :data="apiData.apiAccessList"></Table>
    </div>
  </div>
</template>

<script>
import { apiMenuList, apiMenuDelete } from '@/api/admin.js'

export default {
  name: '',
  data () {
    return {
      query: {},
      search: {
        page: 1
      },
      diyDom: {},
      diyData: {
        columns: [
          {
            title: '序号',
            render: (h, params) => {
              return h('div', params.index + 1)
            }
          },
          {
            title: '权限名称',
            key: 'title',

            render: (h, params) => {
              if (params.row.parent_id != 0) {
                return h('div', [
                  h(
                    'span',
                    {
                      style: {
                        marginLeft: `${params.row.grade * 20}px`
                      }
                    },
                    '|— ' + params.row.title
                  )
                ])
              } else {
                return h('div', [h('span', {}, params.row.title)])
              }
            }
          },
          {
            title: '排序',
            key: 'sort'
          },
          {
            title: '路径',
            key: 'uri'
          },
          {
            title: '操作',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      borderRight: '1px solid #c5c5c5',
                      paddingRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'add-auth',
                          query: {
                            id: params.row.id
                          }
                        })
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'a',
                  {
                    style: {
                      color: '#ed4014'
                    },
                    on: {
                      click: () => {
                        this.deleteAccess(params.row.id)
                      }
                    }
                  },
                  '删除'
                )
              ])
            }
          }
        ]
      },
      apiData: {
        apiAccessList: []
      }
    }
  },
  methods: {
    // 获取表格数据
    getTableList () {
      this.$store.commit('setSpinShow', true)
      apiMenuList({
        page: this.search.page
      })
        .then(res => {
          this.apiData.apiAccessList = this.iteratorMenu(res)
        })
        .finally(() => this.$store.commit('setSpinShow', false))
    },
    // 迭代菜单
    iteratorMenu (menu, grade = 0, target = []) {
      menu.forEach(item => {
        if (item.children) {
          item.grade = grade
          target.push(item)
          this.iteratorMenu(item.children, grade + 1, target)
        } else {
          item.grade = grade
          target.push(item)
        }
      })
      return target
    },
    // 删除权限
    deleteAccess (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除当前数据？',
        onOk: () => {
          setTimeout(() => {
            apiMenuDelete(id).then(res => {
              this.$Message.success('删除成功')
              this.getTableList()
            })
          }, 300)
        }
      })
    },
    pageChange (e) {
      this.search.page = e
      this.getTableList()
    }
  },
  mounted () {
    // this.getTableList()
  }
}
</script>

<style scoped lang="less">
  .template {
    .search {
      display: flex;
    }

    .table {
      margin-top: 10px;
    }

    .tree_part {
      margin-top: 10px;
    }
  }
</style>
